.oul {
    display: flex;
    text-align: center;
    line-height: 46px;
}

.oul > li {
    flex: 1;
    background: #544f6b;
    text-decoration: none;
    color: #8478B3;
}

.context {
    height: 150px;
    text-align: center;
    line-height: 150px;
}

.horizontal {

}

.vertical {
    display: flex;
}

.vertical > .oul {
    display: flex;
    width: 100px;
    flex-direction: column;
}

.vertical > .context {
    flex: 1;
    text-align: center;
    line-height: 150px;
}

.active {
    background: #fff !important;
    color: #8478B3 !important;
}